<template>
  <div>
    <a-form layout="inline" style="margin-bottom: 20px" @submit.prevent="handleAnalyze">
      <a-form-item label="分析类型">
        <a-select 
          v-model="analysisType" 
          style="width: 180px"
          @change="handleAnalysisTypeChange"
        >
          <a-select-option value="all">全部班级</a-select-option>
          <a-select-option value="noMorning">上午无课班级</a-select-option>
          <a-select-option value="noDay">全天无课班级</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="日期范围">
        <a-range-picker 
          v-model="dateRange" 
          style="width: 220px"
          :disabled-date="disabledDate"
        />
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" html-type="submit" :loading="loading">分析</a-button>
        <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>
    
    <a-table 
      :columns="columns" 
      :dataSource="filteredData" 
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="status" slot-scope="text, record">
        <a-tag :color="getStatusColor(record.status)">
          {{ record.status }}
        </a-tag>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="link" @click="handleViewDetail(record)">查看详情</a-button>
      </template>
    </a-table>
    
    <ClassDetailModal 
      v-if="visibleModal" 
      :visible="visibleModal" 
      :classData="selectedClass"
      @close="handleCloseModal"
    />
  </div>
</template>

<script>
import moment from 'moment';
import ClassDetailModal from './ClassDetailModal.vue';

const columns = [
  {
    title: '班级名称',
    dataIndex: 'className',
    key: 'className',
    sorter: true,
  },
  {
    title: '班级人数',
    dataIndex: 'studentCount',
    key: 'studentCount',
    sorter: (a, b) => a.studentCount - b.studentCount,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    filters: [
      { text: '上午无课', value: '上午无课' },
      { text: '全天无课', value: '全天无课' },
      { text: '正常', value: '正常' },
    ],
    onFilter: (value, record) => record.status.includes(value),
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    sorter: (a, b) => moment(a.date).unix() - moment(b.date).unix(),
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  }
];

const mockData = [
  {
    key: '1',
    className: '24级大数据技术一班',
    studentCount: 45,
    status: '上午无课',
    date: '2024-03-02'
  },
  {
    key: '2',
    className: '24级计算机应用班',
    studentCount: 32,
    status: '全天无课',
    date: '2024-03-02'
  },
  {
    key: '3',
    className: '24级建筑工程管理二班',
    studentCount: 28,
    status: '正常',
    date: '2024-03-03'
  },
  {
    key: '4',
    className: '24级建筑工程管理三班',
    studentCount: 36,
    status: '上午无课',
    date: '2024-03-03'
  },
  {
    key: '5',
    className: '24级机电一体化技术二班',
    studentCount: 40,
    status: '正常',
    date: '2024-03-04'
  }
];

export default {
  components: {
    ClassDetailModal
  },
  data() {
    return {
      columns,
      data: [],
      filteredData: [],
      analysisType: 'all',
      dateRange: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: total => `共 ${total} 条`,
      },
      visibleModal: false,
      selectedClass: null,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData(params = {}) {
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        this.data = mockData;
        this.filteredData = [...mockData];
        this.pagination.total = mockData.length;
        this.loading = false;
      }, 500);
    },
    handleAnalysisTypeChange(value) {
      this.analysisType = value;
      this.filterData();
    },
    handleAnalyze() {
      this.filterData();
    },
    handleReset() {
      this.analysisType = 'all';
      this.dateRange = [];
      this.filteredData = [...this.data];
      this.pagination.current = 1;
    },
    filterData() {
      let result = [...this.data];
      
      // 按分析类型过滤
      if (this.analysisType === 'noMorning') {
        result = result.filter(item => item.status === '上午无课');
      } else if (this.analysisType === 'noDay') {
        result = result.filter(item => item.status === '全天无课');
      }
      
      // 按日期范围过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = moment(this.dateRange[0]).startOf('day');
        const endDate = moment(this.dateRange[1]).endOf('day');
        
        result = result.filter(item => {
          const itemDate = moment(item.date);
          return itemDate.isBetween(startDate, endDate, null, '[]');
        });
      }
      
      this.filteredData = result;
      this.pagination.total = result.length;
      this.pagination.current = 1;
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...this.pagination, ...pagination };
      // 这里可以添加排序和过滤的逻辑
    },
    disabledDate(current) {
      // 禁用今天之后的日期
      return current && current > moment().endOf('day');
    },
    getStatusColor(status) {
      const colorMap = {
        '上午无课': 'orange',
        '全天无课': 'red',
        '正常': 'green'
      };
      return colorMap[status] || 'blue';
    },
    handleViewDetail(record) {
      this.selectedClass = record;
      this.visibleModal = true;
    },
    handleCloseModal() {
      this.visibleModal = false;
      this.selectedClass = null;
    }
  }
};
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
  margin-right: 16px;
}
</style>